<html>
  <head>
    <title>todo list</title>
  </head>
  <body style="color: darkorchid">
    <div class="main">
      <div class="mytodo">My todo list</div>
      <div class="row">
        <input
          class="input"
          type="text"
          id="inputtext"
          placeholder="请输入您的任务，按回车键或确认按钮以确认"
          onkeyup="keyup(event)"
        />
        <input
          class="confirm"
          type="button"
          name="bt"
          value="确认"
          onclick="handleClick(event)"
        />
        <!-- <input type="button" name="bt" id="button2" value="确认2" /> -->
      </div>
      <div id="todogrroup"></div>
      <div id="xx" onmouseenter="enter('xx')" onmouseleave="leave('xx')"></div>
      <div class="courge">今天也要加油呀！</div>
    </div>
  </body>
  <script lang="javascript">
    var intCnt = 0;
    function init(){
    console.log('xxx');
    document.getElementById("button2").onclick=handleClick;
    console.log('xxxxxx');
    }

    function handleClick(e){
    console.log('handleClick');
    console.log(e);
    var temp = getvalue();
    var div=document.createElement('id');
    //var div = document.createElement('div');
    //div.innerText = temp;
    //document.getElementById("todogrroup").innerHTML+="<div>"+ temp + "</div>";
    document.getElementById("todogrroup").innerHTML += "<div class='item' id='todo"
    + intCnt + "'><input type='checkbox' name='todocheck'><div class='item-value'>"
    +temp + "</div><button class='item-del' type='button' onclick='deletByIndex("
    + intCnt + ")'>删除</button></div>";
    document.getElementById("inputtext").value = "";
    intCnt++;
    }
    function getvalue(){
    var temp = document.getElementById("inputtext");
    console.log(temp.value);
    return temp.value;
    }
    function deletByIndex(index){
    document.getElementById("todo" + index).remove();
    }
    function keyup(e){

    console.log(e);
    if(e.keyCode==13){
        handleClick();
    }
    }
     init();
  </script>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }
    .main {
      border: 1px solid #91a4f3;
      border-radius: 1px;
      padding: 8px;
    }
    .row {
      display: flex;
    }
    .confirm {
      background-color: rgb(158, 186, 255);
      border: 1px solid #91a4f3;
      border-radius: 5px;
      color: #0838f7;
    }
    .item:hover {
      background-color: rgb(164, 219, 253);
    }

    .item {
      display: flex;
      align-items: center;
      margin: 6px;
      padding: 3px;
    }
    .item-value {
      flex-grow: 1;
      color: #000;
    }
    .item:hover .item-del {
      opacity: 0.5;
    }
    .item-del {
      color: cornsilk;
      background-color: rgb(255, 32, 32);
      border-radius: 5px;
      border: 0px;
      opacity: 1;
    }
    .input {
      padding: 8px;
      outline: none;
      width: 500px;
      margin-right: 10px;
    }
    .input:focus {
      box-shadow: 0px 0px 4px 3px rgb(108, 170, 240);
      outline: none;
      border: none;
    }
    .courge {
      padding: 6px 5px 2px 5px;
    }
    .mytodo {
      padding: 0px 60px 5px 220px;
      font-weight: bolder;
      font-size: larger;
    }
  </style>
</html>
